<template>
<el-row class="hande">
  <el-col :span="12">
    <div>我的可用余额</div>
    <div class="money">{{user.money.toFixed(2)}}</div>
  </el-col>
  <el-col :span="12">
    <div> </div>
    <div>账户状态：
      <el-tag type="success">有效</el-tag>
    </div>
    <el-button type="primary" size="small" style="margin-top: 10px" @click="centerDialogVisible=true">充值</el-button>
  </el-col>
</el-row>
<el-row class="expenses">
  <el-tabs model-value="first" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="近三个月收支明细" name="first" style="height: auto; width: auto">
      <el-table :data="userLogList" border style="width: 100%;">
        <el-table-column prop="userName" label="用户名" width="100px"/>
        <el-table-column prop="methodType" label="操作" width="200px" />
        <el-table-column prop="methodTime" label="操作时间"  width="250"/>
        <el-table-column prop="ipAddr" label="主机地址" width="200" />
      </el-table>
      <!--表格结束-->
    </el-tab-pane>
    <!--<el-tab-pane label="近三个前收支明细" name="second">近三个前收支明细</el-tab-pane>-->
  </el-tabs>
</el-row>
<!--充值对话框开始-->
<el-dialog
    v-model="centerDialogVisible"
    title="充值"
    width="500"
    align-center
>
  <div class="title">请选择你要充值的金额</div>
  <div class="expensesMoney">
    <el-radio-group v-model="money" size="large">
      <el-radio-button label="20元" value="20" />
      <el-radio-button label="30元" value="30" />
      <el-radio-button label="50元" value="50" />
      <el-radio-button label="100元" value="100" />
    </el-radio-group>
    <el-input placeholder="自定义" v-model="money" style="width: 100px; height: 38px; margin-left: 10px"/>
  </div>
  <template #footer>
    <el-button type="primary" @click="recharge">支付</el-button>
  </template>

</el-dialog>
<!--充值对话框结束-->
</template>

<script setup>
import { ref } from 'vue'
import {useUserStore} from "@/stores/user.js";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";

const useStore = useUserStore();
const user = ref({})
const money = ref(0)
const centerDialogVisible = ref(false)

const getUserInfo = ()=>{
  user.value = useStore.user;
  console.log(user.value);
}

//充值业务
const recharge = ()=>{
  user.value.money = Number(money.value) + Number(user.value.money);
  userApi.recharge(user.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          useStore.updateUser(user.value);
          money.value = 0;
          getUserInfo();
          centerDialogVisible.value = false;
        }
      })
}
const userLogList = ref([]);
const getUserLog = ()=>{
  userApi.getUserLog()
      .then(resp => {
        if (resp.code == 10000) {
          userLogList.value = resp.data
        }
      })
}
getUserLog()
getUserInfo()
</script>

<style scoped>
.hande,.expenses {
  padding: 30px;
  background-color: #ffffff;
  margin-bottom: 10px;
}

.money {
  font-weight: bold;
  font-size: 20px;
  color: var(--theme-color)
}
.title {
  margin-bottom: 20px;
}
.eel-radio-button el-radio-button--large {
  margin: 0  10px;
}
.expensesMoney {
  padding: 10px;
}
</style>